<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>作业</title>

    <script>
        /**
         * 从地址栏取出对应的数据
         *
         */
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?")
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
        console.log(arr);

        /**
         * 声明对象 包含省份及城市
         * @type {{province: string[], city: {湖南省: string[], 湖北省: string[]}}}
         */
        let data = {
            province : ["湖南省","湖北省"],
            city : {
                      "湖南省" : ["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西土家族苗族自治州"],
                      "湖北省" : ["武汉市","黄石市","襄阳市","荆州市","宜昌市","十堰市","孝感市","荆门市","鄂州市","黄冈市","咸宁市","随州市","恩施土家族苗族自治州"]
            }
        }

        window.onload = function(){
            debugger;
            //初始化赋值学历
            var opts = document.getElementById("degree").getElementsByTagName("option");
            opts[1].selected=true;

            //加载对应的省级地区
            var province_address = document.getElementById("province_address");
            for (var n in data.province) {
                //第一个代表标签内的内容，第二个代表value
                province_address.options.add(new Option(data.province[n],data.province[n]));
            }

            //回填部分数据
            if (arr[0] != null && arr[1] !=null){
                document.getElementById("name").value=decodeURIComponent(arr[0].slice(5));
                document.getElementById("age").value=arr[1].slice(4);
                document.getElementById("degree").value=decodeURIComponent(arr[2].slice(7));
                document.getElementById("height").value=decodeURIComponent(arr[6].slice(7));
                document.getElementById("hobby").value=decodeURIComponent(arr[7].slice(6));
                document.getElementById("dream").value=decodeURIComponent(arr[8].slice(6));
                document.getElementById("name").disabled="true";
                document.getElementById("age").disabled="true";
                document.getElementById("userFormSubmit").disabled="true";
            }
        }

        let user = {
            name : null,
            age : null,
            degree : null,
            p_address : null,
            c_address : null,
            sex : null,
            height : null,
            hobby : null,
            dream : null
        }

        function checkFormSubmitMethod() {
            debugger;
            //获取form表单
            let userForm = document.forms["userForm"];
            console.log(userForm);
            user.name = userForm["name"].value;
            user.sex = userForm["sex"].value;
            user.degree = userForm["degree"].value;
            user.p_address = userForm["p_address"].value;
            user.c_address = userForm["c_address"].value;
            user.height = userForm["height"].value;
            user.age = userForm["age"].value;
            user.hobby = userForm["hobby"].value;
            user.dream = userForm["dream"].value;

            //判断各项信息是否填写完整
            if (user.name == "") {alert("请输入您的姓名");return false;}
            if (user.age == "") {alert("请输入您的年龄");return false;}
            if (user.degree == "") {alert("请输入您的学历");return false;}
            if (user.p_address == "" || user.c_address == "") {alert("请输入您的地址");return false;}
            if (user.sex == "") {alert("请输入您的性别");return false;}
            if (user.height == "") {alert("请输入您的身高");return false;}
            if (user.hobby == "") {alert("请输入您的学号");return false;}
            if (user.dream == "") {alert("请输入您的梦想");return false;}

            //用正则表达式判断输入的年龄是否符合要求
            let patt1 = /[0-9]/g;
            if (!patt1.test(user.age) || user.age<"18") {alert("您输入的年龄不符合要求");return false;}
            // if (isNaN(user.age) || user.age<"18") {alert("您输入的年龄不符合要求");return false;}
            return true;
        }

        //获取省级所对应的市级城市
        //s用于记录点击select的次数
        //因为option无法使用onclick（好吧，可能是我不会= = ）
        var s=0;
        function test(value) {
            debugger;
            if (s++>0) {
                var city_address = document.getElementById("city_address");

                //判断市级城市是否只有一个空的数据，是就创建新的值
                if (city_address.options.length == 1) {
                    for (var n in data.city[value]) {
                        //第一个代表标签内的内容，第二个代表value
                        city_address.options.add(new Option(data.city[value][n], data.city[value][n]));
                    }
                }else {
                    //不是就将其清空，留一个空值，再重新创建（该方法比较笨）
                    city_address.options.length = 1;
                    for (var n in data.city[value]) {
                        city_address.options.add(new Option(data.city[value][n], data.city[value][n]));
                    }
                }
            }

            if (s>1){s=0;}
        }

    </script>

</head>
<body>

<form action="" method="get" name="userForm"  onsubmit="return checkFormSubmitMethod()">
    <span>姓名：</span>
    <input type="text" id="name" name="name" value=""><br>

    <span>年龄：</span>
    <input type="age" name="age" id="age" value="">(年龄必须为数字且大于等于18)<br>

    <span>学历：</span>
    <select name="degree" id="degree"
            style="margin-right: 10px; width: 170px">
        <option value="">

        </option>
        <option value="小学">
            小学
        </option>
        <option value="初中">
            初中
        </option>
        <option value="高中">
            高中
        </option>
        <option value="大专">
            大专
        </option>
        <option value="本科">
            本科
        </option>
        <option value="研究生">
            研究生
        </option>
    </select><br>

    <span>地址：</span>
    <select name="p_address" id="province_address" onclick="test(this.value)"
            style="margin-right: 10px; width: 170px">
        <option value="">

        </option>
    </select>
    <select name="c_address" id="city_address"
            style="margin-right: 10px; width: 170px">
        <option value="">

        </option>
    </select>
    <br>

    <span>性别：</span>
    <span style="margin-left: 20px; margin-right: 10px">男</span>
    <input type='radio' name='sex' value='男' checked/>
    <span style="margin-left: 35px; margin-right: 10px">女</span>
    <input type='radio' name='sex' value='女'/><br>

    <span>身高：</span>
    <input type="text" id="height" name="height" value=""><br>

    <span>爱好：</span>
    <input type="text" id="hobby" name="hobby"  value="" maxlength="5"><br>

    <span>梦想：</span>
    <input type="text" id="dream" name="dream" value=""><br>

    <input type="submit" value="提交" id="userFormSubmit">
</form>

</body>
</html>
